<template>
   <div class="order">
      <HeaderTop title="订单列表"/>
      <!-- 未登录时显示 -->
      <section class="order_no_login" v-if="!userInfo.username">
         <img src="@/assets/images/order/person.png" />
         <template v-if="!userInfo.username">
            <h3>请先登录后查看订单</h3>
            <button @click="$router.push('/login')">去登陆</button>
         </template>
      </section>
      <!-- 消息通知栏 -->
      <van-notice-bar
         v-if="userInfo.username && orderList.length"
         left-icon="volume-o"
         text="点击订单项可查看订单详情，5星好评可获得更多的积分哟 ^_^"
      />
      <!-- 订单列表为空时显示 -->
      <section class="empty" v-if="userInfo.username && !orderList.length">
         <van-empty
            class="custom-image"
            image="http://admi-yuliner.oss-cn-hangzhou.aliyuncs.com/empty.png"
            description="快去添加商品吧"
         />
      </section>
      <!-- 展示用户订单 -->
      <section class="order-list">
         <div class="order-item" v-for="item of orderList" :key="item.id" @click="$router.push('/orderdetail/' + item.id)">
            <div class="order-num">
               <span>订单号：{{item.order_num}}</span>
               <span class="copy-num" @click.stop="copyOrderNum(item.order_num)">
                  <van-tag plain type="primary">复制</van-tag>
               </span>
            </div>
            <table class="info-2">
               <tr>
                  <th>总价</th>
                  <th>购买人</th>
                  <th>操作</th>
               </tr>
               <tr>
                  <td>{{item.food_totalprice}}</td>
                  <td>{{item.realname}}</td>
                  <td class="update-del">
                     <span class="del" @click.stop="deleteOrder(item)" v-if="item.state">删除</span>
                     <span class="update" @click.stop="finishOrder(item.id)" v-else>签收</span>
                  </td>
               </tr>
            </table>
         </div>
      </section>
   </div>
</template>

<script>
import HeaderTop from "@/components/HeaderTop/HeaderTop";
import { finishOneOrder } from '@/api/ajax'
//vuex
import { mapState, mapActions, mapMutations } from 'vuex'
//vant
import { Toast, Dialog } from 'vant'

export default {
   components: {
      HeaderTop,
   },
   computed: {
      ...mapState('order', ['orderList']),
      ...mapState('profile', ['userInfo']),
   },
   mounted() {
      // 获取用户订单列表
      this.getUserOrders(this.userInfo.username)
   },
   methods: {
      ...mapActions('order', ['getUserOrders', 'delOrderById']),
      ...mapMutations('order', ['FINISH_ONE_ORDER']),
      /* 复制订单号到剪切板中 */
      copyOrderNum(text) {
         this.$copyText(text).then(() => {
            Toast.success('复制成功')
         }, () => {
            Toast.fail('复制失败')
         })
      },
      /* 删除订单 */
      deleteOrder({id}) {
         Dialog.confirm({message: '您确定删除该订单?'}).then(()=>{
            // 删除该订单
            this.delOrderById(id)
         },()=>{})
      },
      /* 签收订单操作 */
      finishOrder(orderId) {
         Dialog.confirm({message: '您确定签收该订单?'}).then(async ()=>{
            const { msg } = await finishOneOrder(Number(orderId))
            if (msg !== 'ok') return Toast('签收失败')
            // 更改对应状态数据
            this.FINISH_ONE_ORDER(Number(orderId))
            Toast('签收成功')
         },()=>{})
      }
   }
};
</script>

<style scoped lang="stylus">
&.order { // 订单
   color: #333;
   width: 100%;
   min-height: 100vh;
   padding: 45px 0 50px;
   box-sizing: border-box;
   background: #f8f8f8;
   font-size: 14px;
   .icon-jiantou2 { color: #fff;}

   .order_no_login {
      padding-top: 50px;
      width: 60%;
      margin: 0 auto;
      text-align: center;

      >img {
         display: block;
         width: 100%;
         height: 30%;
      }

      >h3 {
         padding: 10px 0;
         font-size: 17px;
         color: #6a6a6a;
      }

      >button {
         display: inline-block;
         background: #02a774;
         font-size: 14px;
         color: #fff;
         border: 0;
         outline: none;
         border-radius: 5px;
         padding: 10px 20px;
      }
   }

   /* 空状态 */
   .empty {
      transform: translateY(30%);
   }

   /* 订单列表 */
   .order-list {
      .order-item {
         position relative;
         padding: 10px;
         background: #fff;
         color: #666;
         &::before {
            content: '';
            height: 1px;
            width: 100%;
            background: #f1f1f1;
            position: absolute;
            bottom: 0;
            left: 0;
         }
         &:last-child { padding-bottom: 12px;}
         table, td {
            border: 1px solid #736f6f;
         }
         .order-num {
            line-height: 25px;
            position relative;
            .copy-num {
               position: absolute;
               right: 0;
               top: 50%;;
               z-index: 98;
               transform: translate(0, -50%) scale(.8);
               font-size: 12px;
               cursor: pointer;
            }
         }
         .info-2 {
            width: 100%;
            text-align: center;
            th {
               height: 30px;
               line-height: 30px;
            }
            td {
               height: 35px;
               line-height: 35px;
            }
            tr { cursor: pointer; }
            /* 操作按钮 */
            .update-del {
               width: 160px;
               position: relative;
               z-index: 80;
               span {
                  padding: 5px 10px;
                  border: 1px solid #736f6f;
                  color: #fff;
                  font-size: 12px;
                  cursor: pointer;
               }
               .del { background: #d9534f; }
               .update { background: #337ab7;}
            }
         }
      }
   }
}
</style>